<template>
  <div class="cart">
    <van-nav-bar
      title="购物车"
      right-text="管理"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="content">
      <div class="clone" v-for="(item, index) in list" :key="index">
        <van-card
          num="1"
          :price="item.price"
          :desc="item.littleTitle"
          :title="item.title"
          :thumb="item.imgurl"
        />
      </div>
    </div>
    <div class="cart_footer">
      <p class="allcheck">
        <van-switch v-model="checked" size="16px" active-color="red" />
        全选
      </p>
      <p class="price">
        总计：<span>¥{{ allprice }}</span>
      </p>
      <p class="submit">结算</p>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import router from "@/router/index.js";
import http from "../utils/api";
export default {
  setup() {
    const checked = ref(true);
    const list = ref([]);
    const allprice = ref(0);
    onMounted(() => {
      const arr = localStorage.getItem("_id").split(",");
      for (let i of arr) {
        http.getIdProductApi({ _id: i }).then((res) => {
          list.value.push(res.data.data[0]);
          allprice.value += res.data.data[0].price;
          console.log(list.value);
        });
      }
    });
    return {
      checked,
      list,
      allprice,
    };
  },
  methods: {
    onClickLeft() {
      router.go(-1);
    },
    onClickRight() {},
  },
};
</script>
<style lang="less" scoped>
.cart {
  width: 100%;
  .content {
    .clone {
      width: 365px;
      height: 120px;
      overflow: hidden;
      margin: 0 auto;
      padding: 8px 0;
    }
  }
  .cart_footer {
    width: 100%;
    height: 50px;
    border: 1px solid #000;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    p {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
    .allcheck {
      color: grey;
      width: 100px;
      justify-content: space-evenly;
    }
    .price {
      span {
        color: red;
        font-size: 15px;
        margin: 0 10px;
      }
    }
    .submit {
      width: 125px;
      background-color: red;
      color: #fff;
    }
  }
}
</style>
